﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="login.aspx.cs" Inherits="weixin.crm.login" %>

<!DOCTYPE html>
<html lang="en" style="overflow: hidden;">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>账号登录</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" media="screen" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <script src="css/jquery-2.1.0.min.js"></script>
    <script type="text/javascript">

    </script>
</head>
<body>
    <div id="particles-js">
        <div class="login" style="display: block;">
            <div class="login-top">
                登录
            </div>
            <div class="login-center clearfix">
                <div class="login-center-img">
                    <img src="css/name.png"></div>
                <div class="login-center-input">
                    <input id="username" name="username" placeholder="请输入您的用户名" onfocus="this.placeholder=''" onblur="this.placeholder='请输入您的用户名'" type="text">
                    <div class="login-center-input-text">用户名</div>
                </div>
            </div>
            <div class="login-center clearfix">
                <div class="login-center-img">
                    <img src="css/password.png"></div>
                <div class="login-center-input">
                    <input id="password" name="password" value="" placeholder="请输入您的密码" onfocus="this.placeholder=''" onblur="this.placeholder='请输入您的密码'" type="password">
                    <div class="login-center-input-text">密码</div>
                </div>
            </div>
            <div class="login-button">
                登陆
            </div>
        </div>
        <div class="sk-rotating-plane"></div>
        <canvas class="particles-js-canvas-el" style="width: 100%; height: 100%;" width="1920" height="917"></canvas>
    </div>
    <!-- scripts -->
    <!--<script src="css/particles.js"></script>
    <script src="css/app.js"></script>-->
    <script type="text/javascript">
        function hasClass(elem, cls) {
            cls = cls || '';
            if (cls.replace(/\s/g, '').length == 0) return false; //当cls没有参数时，返回false
            return new RegExp(' ' + cls + ' ').test(' ' + elem.className + ' ');
        }
        function addClass(ele, cls) {
            if (!hasClass(ele, cls)) {
                ele.className = ele.className == '' ? cls : ele.className + ' ' + cls;
            }
        }
        function removeClass(ele, cls) {
            if (hasClass(ele, cls)) {
                var newClass = ' ' + ele.className.replace(/[\t\r\n]/g, '') + ' ';
                while (newClass.indexOf(' ' + cls + ' ') >= 0) {
                    newClass = newClass.replace(' ' + cls + ' ', ' ');
                }
                ele.className = newClass.replace(/^\s+|\s+$/g, '');
            }
        }
        document.querySelector(".login-button").onclick = function () {
            if ($("#username").val() == "" || $("#password").val() == "") {
                alert("请输入账号或密码");
                return;
            }
            addClass(document.querySelector(".login"), "active")
            setTimeout(function () {
                addClass(document.querySelector(".sk-rotating-plane"), "active");
                document.querySelector(".login").style.display = "none";
                $.ajax({
                    url: "api.ashx?rnd=" + Math.random(),
                    type: "POST",
                    data: { Action: "wxuserlogin", username: $("#username").val(), password: $("#password").val(), openid: "<%=openid%>" },
                    dataType: "json",
                    success: function (data) {
                        if (data.success == true) {
                            removeClass(document.querySelector(".login"), "active");
                            removeClass(document.querySelector(".sk-rotating-plane"), "active");
                            document.querySelector(".login").style.display = "block";
                            alert('登录成功');
                            window.location.href = "main.aspx";
                        }
                        else {
                            removeClass(document.querySelector(".login"), "active");
                            removeClass(document.querySelector(".sk-rotating-plane"), "active");
                            document.querySelector(".login").style.display = "block";
                            alert('登录失败,' + data.info);
                        }
                    },
                    error: function () {
                        removeClass(document.querySelector(".login"), "active");
                        removeClass(document.querySelector(".sk-rotating-plane"), "active");
                        document.querySelector(".login").style.display = "block";
                        alert('登录失败！');
                    }
                });
            }, 800);
        }
    </script>
</body>
</html>
